/** 
  实习总结详情
*/
<template>
  <div class="operate-intern-summary-container">
    <div style="height: 30px;">
      <el-breadcrumb style="float: left;" separator="/">
        <el-breadcrumb-item :to="{ path: '/internSummary' }">
        <span @click="reback()">{{ $t('internSummary.internSummary') }}</span></el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('graduateBase.details') }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button style="float:right; padding:0;" type="text" @click="reback()">{{ $t('common.btn.back') }}</el-button>
    </div>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
      <div class="title">
        <div class="float-left">
          {{ $t('internSummary.internCompletion') }}
        </div>
        <div class="float-right">
          <el-button @click="exportInternAssess()">{{ $t('internSummary.exportInternAssessTable') }}</el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="sub-container">
        <div class="sub-container-title">{{ $t('internSummary.basicInfo') }}</div>
        <table class="table-style-baseinfos">
          <tbody>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.basicName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.name }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.studentId') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.studentId }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.collegeAcademy') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.collegeAcademyStr }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.major') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.majorStr }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.trainingLevel') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.trainingLevelStr }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.trainingCategory') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.trainingCategoryStr }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.degreeType') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.degreeTypeStr }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.formLearning') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.formLearningStr }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.currentGrade') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.currentGrade }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.teacherName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.teacherName }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.majorName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.majorName }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.majorField') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.majorField }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.outsideAdvisorName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.outsideAdvisorName }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.submitFrequency') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.submitFrequency }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.internBaseName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.baseName }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.positionName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.positionName }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.practiceContent') }}:</td>
              <td class="text-left-background-none" colspan="3">{{ dataListProp.practiceContent }}</td>
            </tr>
          </tbody>
        </table>
        <div class="sub-container-title" style="margin-top: 30px;">
          <span>{{ $t('internSummary.professionPracticePlan') }}</span>
          <!-- 收起 -->
          <span class="collapse-info" v-if="collapse" @click="collapse = !collapse">
            <i class="el-icon-arrow-up"></i><span style="margin-left: 10px;">{{ $t('graduateBase.collapse') }}</span>
          </span>
          <!-- 展开 -->
          <span class="collapse-info" v-else @click="collapse = !collapse">
            <i class="el-icon-arrow-down"></i><span style="margin-left: 10px;">{{ $t('graduateBase.unfold') }}</span>
          </span>
        </div>
        <div class="profession-practice-table" v-show="!collapse">
          <table class="table-style-baseinfo">
            <thead>
              <tr>
                <th class="text-center-background-color">{{ $t('internSummary.reportMonth') }}</th>
                <th class="text-center-background-color">{{ $t('internSummary.content') }}</th>
                <th class="text-center-background-color">{{ $t('internSummary.enclosureFile') }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in dataListProp.situationList" :key="index">
                <td class="text-center-background">{{ item.reportMonth }}</td>
                <td style="width: 70%;" class="text-center-background">{{ item.content }}</td>
                <td class="text-center-background">
                  <el-button type="text" @click="downLoadEnclosureFile(item.enclosureFileUrl)">{{ item.enclosureFileName }}</el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="sub-container-title">{{ $t('internSummary.practiceSummary') }}</div>
        <table class="table-style-baseinfos">
          <tbody>
            <tr>
              <td class="text-right-background-color table-td-row-one">{{ $t('internSummary.summaryContent') }}:</td>
              <td class="text-left-background-none table-td-row-three">{{ dataListProp.summaryContent }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color table-td-row-one">{{ $t('internSummary.enclosureFile') }}:</td>
              <td class="text-left-background-none table-td-row-three">
                <div v-for="(item, index) in dataListProp.enclosureFileNameList" :key="index">
                  <el-button type="text" @click="downLoadEnclosureFile(dataListProp.enclosureFileUrlList[index])">{{ item }}</el-button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <table class="table-style-baseinfos">
          <tbody>
            <tr>
              <td class="text-right-background-color table-td-row-one">{{ $t('internSummary.score') }}:</td>
              <td class="text-left-background-none table-td-row-three">
                <span>{{ dataListProp.score }}</span>
                <el-button style="margin: 5px 40px;" type="primary" size="mini" @click="selectScoreDetail()">{{ $t('internSummary.selectScoreDetail') }}</el-button>
              </td>
            </tr>
            <tr>
              <td class="text-right-background-color table-td-row-one">{{ $t('internSummary.internReview') }}:</td>
              <td class="text-left-background-none table-td-row-three">{{ dataListProp.comment }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>
    <el-card shadow="never" body-style="padding: 24px;">
      <div class="sub-container-title" style="margin-top: 30px;">
        <span>{{ $t('internSummary.auditProgress') }}</span>
        <!-- 收起 -->
        <span class="collapse-info" v-if="collapseAuditPro" @click="collapseAuditPro = !collapseAuditPro">
          <i class="el-icon-arrow-up"></i><span style="margin-left: 10px;">{{ $t('graduateBase.collapse') }}</span>
        </span>
        <!-- 展开 -->
        <span class="collapse-info" v-else @click="collapseAuditPro = !collapseAuditPro">
          <i class="el-icon-arrow-down"></i><span style="margin-left: 10px;">{{ $t('graduateBase.unfold') }}</span>
        </span>
      </div>
      <edu-table v-show="!collapseAuditPro" :pagination="false" :tooltipEffect="tooltipEffect" :selection="false" stripe :data="approvalProgressData" size="mini">
        <edu-table-column :label="$t('internSummary.time')" prop="time"></edu-table-column>
        <edu-table-column :label="$t('internSummary.approvorName')" prop="approvorName"></edu-table-column>
        <edu-table-column :label="$t('internSummary.faculty')" prop="faculty"></edu-table-column>
        <edu-table-column :label="$t('internSummary.result')" prop="result">
          <template slot-scope="scope">
            {{ scope.row.result | result}}
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('internSummary.setpId')" prop="setpId">
          <template slot-scope="scope">
            {{ scope.row.setpId | setpId}}
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('internSummary.explanation')" prop="content"></edu-table-column>
      </edu-table>
    </el-card>
    <!-- 评分-考核成绩录入表开始 -->
    <el-dialog
      @close="closeScoreTable"
      :title="$t('internSummary.selectScoreDetail')"
      width="70%"
      append-to-body
      :visible.sync="internScoreVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <query-intern-score-table 
        :dataListProp="internScoreInfo"
        :gradeId="internSummaryData.id"
        @confirm-to-close-score-table="closeScoreTable">
      </query-intern-score-table>
    </el-dialog>
    <!-- 评分-考核成绩录入表结束 -->
  </div>
</template>
<script>
import { downloadfile } from "common/src/api/upload"
import graduateStudentApi from 'common/src/api/graduateStudent/graduateStudent'
import queryInternScoreTable from './queryInternScoreTable'
export default {
  components: {
    'query-intern-score-table': queryInternScoreTable
  },
  data() {
    return {
      dataListProp: {},
      collapse: false,
      collapseAuditPro: false,
      internScoreVisible: false,
      internScoreInfo: {},
      approvalProgressData: []
    };
  },
  props: {
    internSummaryData: {
      type: Object,
      default: () => {}
    },
    operateMode: {
      type: String,
      default: 'add'
    },
    status: {
      type: Number,
      default: 0
    }
  },
  filters: {
    result(val) {
      switch(val) {
        case 'COMMIT':
          return '提交'
        case 'Process':
          return '通过'
        case 'Reject':
          return '已驳回'
        case 'End':
          return '已结束'
      }
    },
    setpId(val) {
      switch(val) {
        case 0:
          return '提交'
        case 1:
          return '校外导师审核'
        case 2:
          return '导师审核'
      }
    }
  },
  async created() { 
  },
  methods: {
    reback() {
      this.$emit('change-intern-summary-index')
    },
    downLoadEnclosureFile(url) {
      downloadfile(url)
    },
    // 导出实习考核表
    exportInternAssess() {
      if (!(this.dataListProp.auditStatus === 3)) {
        this.$eduAlert(this.$t('internSummary.permitExportCondition'), this.$t('graduateBase.prompt'), {
          type: 'warning'
        })
        return
      }
      this.$emit('export-intern-assess-table', this.dataListProp.id);
    },
    // 查看评分详情
    selectScoreDetail() {
      graduateStudentApi.getHasDetailTemp({
        "itemCategory": "2",
        "remarkTemplate": {
          "id": this.dataListProp.id,
          "trainingLevel": this.dataListProp.trainingLevel,
          "trainingType": this.dataListProp.trainingCategory,
          "degreeType": this.dataListProp.degreeType,
          "learnForm": this.dataListProp.formLearning,
          "collegeAcademy": this.dataListProp.collegeAcademy,
          "major": this.dataListProp.major
        }
      }).then(res => {
        if (res.code === 200) {
          this.internScoreInfo = res.data;
        }
      });
      this.internScoreVisible = true;
    },
    // 关闭成绩录入表
    closeScoreTable() {
      this.internScoreInfo = {};
      this.internScoreVisible = false;
    },
    // 获取审核进度
    getApprovalProgress() {
      graduateStudentApi.getPracticeGetActDetail(this.dataListProp.actNo).then(res => {
        if (res.code === 200) {
          this.approvalProgressData = res.data;
        }
      })
    }
  },
  watch: {
    internSummaryData: {
      handler(newVal) {
        if (newVal) {
          this.dataListProp = JSON.parse(JSON.stringify(newVal))
          this.dataListProp['enclosureFileNameList'] = this.dataListProp.enclosureFileName.split(',')
          this.dataListProp['enclosureFileUrlList'] = this.dataListProp.enclosureFileUrl.split(',')
          this.getApprovalProgress();
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .operate-intern-summary-container {
    .el-breadcrumb__item:last-child ::v-deep {
      .el-breadcrumb__inner {
        color: #606266;
        font-weight: bold;
        cursor: default
      }
    }
    .el-breadcrumb__item ::v-deep {
      .is-link {
        color: #aaa;
        font-weight: unset;
      }
      .is-link:hover {
        color: #409eff;
      }
    }
    .title {
      margin-bottom: 40px;
      font-size: 18px;
    }
    .sub-container {
      color: #2a394e;
      padding: 0 20px;
      font-size: 16px;
    }
    .sub-container-title {
      margin-bottom: 20px;
      font-size: 16px;
      .collapse-info {
        margin-left: 55px;
        color: #3a7fe8;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .table-style-baseinfos {
      table-layout: fixed;
      word-break: break-all;
      background-color: rgba(210, 212, 214, 1);
      box-sizing: border-box;
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      border-radius: 0px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      width: 100%;
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #8896a7;
      margin-bottom: 20px;
      td {
        width: 25%;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-weight: 401;
        font-style: normal;
        font-size: 14px;
        color: #2b3b4e;
        height: 32px;
        padding: 0 10px;
      }
      .text-right-background-color {
        background-color: #fdfeff4d;
        text-align: right;
      }
      .text-left-background-none {
        text-align: left;
      }
      .table-td-row-one {
        width: 25%;
      }
      .table-td-row-three {
        width: 75%;
      }
    }
    .table-style-baseinfo {
      table-layout: fixed;
      word-break: break-all;
      background-color: rgba(210, 212, 214, 1);
      box-sizing: border-box;
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      border-radius: 0px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      width: 100%;
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #8896a7;
      margin-bottom: 20px;
      .text-right-background-color {
        background-color: #fdfeff4d;
        text-align: right;
      }
      td {
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-weight: 401;
        font-style: normal;
        font-size: 14px;
        color: #2b3b4e;
        height: 32px;
        padding: 0 10px;
      }
    }
    .operate-footer {
      text-align: right;
    }
  }
</style>